<template>
  <div>
    <div class="L2-head">实有房屋 49977</div>
    <div>
      <!-- <v-chart :options="options" class="" /> -->
      <div id="syfw" style="float:left;width:100%;height: 266px"></div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import echarts from 'echarts'
export default {
  data() {
    return {
      options: {
        
      }
    };
  },
  props: {},
  computed: {},
  components: {
    "echarts": echarts,
  },
  created: function () {},
  mounted() {
    this.initsyfw();
  },
  watch: {},
  methods: {
    initsyfw(){
      var myChart = echarts.init(document.getElementById('syfw'));
      myChart.setOption({
        title: {
          text: "", //正标题
          x: "center", //标题水平方向位置
          y: "0", //标题竖直方向位置
          textStyle: {
            fontSize: 18,
            fontWeight: "normal",
            color: "#666",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", //阴影，若需要为直线，则值为'line'
          },
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: false },
          },
        },
        legend: {
          show: false
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "20%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            min: 0,
            type: "category", //纵向柱状图，若需要为横向，则此处值为'value'， 下面 yAxis 的type值为'category'
            data: [
              "北西湾子",
              "高家营",
              "石嘴子",
              "驿马图",
              "石窑子",
              "红旗营",
              "白旗",
              "狮子沟",
              "清三营",
              "四台嘴",
            ],
            axisLine: {
              //这是x轴文字颜色
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            min: 0,
            type: "value",
            splitArea: { show: false },
            axisLabel: {
              // formatter: '{value}',
              formatter: function (value) {
                var texts = [];
                if (value > 9999) {
                  texts.push(value / 10000 + "万");
                } else {
                  texts.push(value);
                }
                return texts;
              },
              textStyle: {
                color: "rgba(255,255,255,0.8)",
              },
            },
            axisLine: {
              //这是y轴文字颜色
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: {
          barWidth: 13, //柱状条宽度
          name: "房屋量",
          type: "bar",
          itemStyle: {
            normal: {
              show: true, //鼠标悬停时显示label数据
              barBorderRadius: [10, 10, 10, 10], //柱形图圆角，初始化效果
              color: "#FBB730",
            },
          },
          label: {
            normal: {
              show: false, //显示数据
              position: "top", //显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom'
            },
          },
          data: [22419, 9475, 2399, 2454, 2029, 2521, 2405, 1944, 1400, 2931],
        }
      })
    }
  },
};
</script>
<style scoped>
.L2-head {
  font-size: 30px;
  color: #0096ff;
  margin-left: 40px;
  margin-top: 20px;
  font-weight: bolder;
  font-style: italic;
}
</style>